<template>
  <chart :options="options" :auto-resize="autoResize" :theme="theme" :watch-shallow="watchShallow"
         :class="className" :style="{height:height,width:width}"></chart>
</template>

<script>
  export default {
    props: {
      title: { type: String, default: '' },
      chartData: { type: Object },
      className: { type: String, default: 'chart' },
      theme: { type: String, default: 'macarons' },
      autoResize: { type: Boolean, default: true },
      watchShallow: { type: Boolean, default: true },
      width: { type: String, default: '100%' },
      height: { type: String, default: '250px' }
    },
    data() {
      return {
        options: this.buildOptions(this.chartData),
        barWidth: 10
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.options = this.buildOptions(val)
        }
      }
    },
    mounted() {
      if (!this.options && this.chartData) {
        this.options = this.buildOptions(this.chartData)
      }
    },
    methods: {
      buildOptions(chartData) {
        if (!chartData) {
          return
        }

        var yAxisData = []
        var scoreMaxValues = []
        console.log(chartData)
        chartData.indicator.map(item => {
          yAxisData.push(item.name)
          scoreMaxValues.push(item.max)
        })
        var valueBean = chartData.valueBeans[0]
        var scoreValues = []
        valueBean.data.map(item => {
          scoreValues.unshift(item)
        })
        yAxisData.reverse()
        scoreMaxValues.reverse()

        return {
          name: {
            text: 'aaaaa'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {
            show: false,
            type: 'value',
            max: scoreMaxValues[0]
          },
          yAxis: {
            show: true,
            type: 'category',
            data: yAxisData,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [{
            type: 'bar',
            itemStyle: {
              normal: {
                color: 'rgba(118, 238, 0, 0.2)'
              }
            },
            silent: true,
            barWidth: this.barWidth,
            barGap: '-100%', // Make series be overlap
            data: scoreMaxValues,
            label: {
              show: true,
              position: 'right',
              formatter: scoreValues[yAxisData.indexOf('{b}')],
              color: '#000'
            }
          }, {
            type: 'bar',
            barWidth: this.barWidth,
            z: 10,
            itemStyle: {
              normal: {
                color: 'rgba(118, 238, 0, 1)'
              }
            },
            data: scoreValues
          }]
        }
      }
    }
  }
</script>
